<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
    />
  </head>
  <body>
    <div class="player" id="videoPlayer"></div>
  </body>

  <script
    charset="utf-8"
    type="text/javascript"
    src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
  ></script>
  <!-- 请下载之后使用 -->
  <!-- 阿里云视频播放器组件 -->
  <script
    charset="utf-8"
    src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"
  ></script>

  <script>
    var danmulist = [
      {
        mode: 1,
        text: "哈哈",
        stime: 1000,
        size: 25,
        color: 0xffffff,
      },
      {
        mode: 1,
        text: "666",
        stime: 6000,
        size: 25,
        color: 0xffffff,
      },
    ];
    var player = new Aliplayer(
      {
        id: "videoPlayer",
        width: "100%",
        autoplay: false,
        // cover: "http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png",
        //播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
        source:
          "https://outin-e15c6b65149b11ed921f00163e1c9256.oss-cn-shanghai.aliyuncs.com/sv/59ae3f75-1826d3a18b6/59ae3f75-1826d3a18b6.mp4?Expires=1659772818&OSSAccessKeyId=LTAI3DkxtsbUyNYV&Signature=dJ8Nvq2huFI8ms%2BEnUYSiKcdDQE%3D",

        //   encryptType: "1", //如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        //   vid: "41b6955d9dd84519a1b1de07034f562b",
        //   playauth:
        //     "eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWY1TE1EY3Vaa1N3UFRUYTNYMHZUZ1hZc0lZdlpET2h6ejJJSDFFZm5sb0FPa2FzUHd6bFd0UjZmd2Vsck1xRnNjVkh4R2ZNWmNyczhRUG9WNzRKcExGc3QySjZyOEpqc1Vadk5scXhFYXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRXh6Rm1xQ2QvWDRvZ3lRTzE3eUdwTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHphazVNalRTNEsvTllLMUFkS0FvNFhlcVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZDFRSUNGZk1sRWVVR29BQkdXODdRMnh4YmJQajkwejc4bmYyWVZod3V0cWRabm5oTWpubnlOWWdPekpSOE0vNm81QnlmSzA4bFlIOE9uK3RsKzFtVWYzWXFhdnNXVXlGWGlpM1M3QUZRN1ZJcUNDZ0w0V3BOUEtXQjZPVHZxV284RlFtYWZuYkRkTnlkQUtuSk9obWxJUkhhcnNrV1VhOWlMMnhiL3JMMjJPdDNmMG9pYnRJTDIyb1hxST0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJnYXFwMU1Ec0hsOTE5anE1RlBRRVU1aThIK1l3b0RCc1FGVVRzM2xqeVE3ZEYycXFuREg3aFNsdEhSSkZGNnFaXCIsXCJDYWxsZXJcIjpcIkJ2OW9WNjVwQm1CODh3U1pRREVHUkEwM1lwNHFIUklsM0VyZE11ZDZBZm89XCIsXCJFeHBpcmVUaW1lXCI6XCIyMDIyLTA4LTA2VDA3OjE0OjA0WlwiLFwiTWVkaWFJZFwiOlwiNDFiNjk1NWQ5ZGQ4NDUxOWExYjFkZTA3MDM0ZjU2MmJcIixcIlNpZ25hdHVyZVwiOlwiTGtUb0IzZWZUckd5Y0xTeDBJWitKVXJwcTlBPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiNDFiNjk1NWQ5ZGQ4NDUxOWExYjFkZTA3MDM0ZjU2MmIiLCJUaXRsZSI6IjIubXA0IiwiQ292ZXJVUkwiOiJodHRwOi8vb3V0aW4tZTE1YzZiNjUxNDliMTFlZDkyMWYwMDE2M2UxYzkyNTYub3NzLWNuLXNoYW5naGFpLmFsaXl1bmNzLmNvbS80MWI2OTU1ZDlkZDg0NTE5YTFiMWRlMDcwMzRmNTYyYi9zbmFwc2hvdHMvY2VkZjZlZWQ5YzI4NDg4Yjk5ZWJlNjIwY2NlMDI1YjYtMDAwMDIuanBnP0V4cGlyZXM9MTY1OTc3MzU0NCZPU1NBY2Nlc3NLZXlJZD1MVEFJM0RreHRzYlV5TllWJlNpZ25hdHVyZT1KS0JWZmw4RiUyRkFiT0JxeUtUUjdUZk04JTJCeHlrJTNEIiwiRHVyYXRpb24iOjM0LjY2Njd9LCJBY2Nlc3NLZXlJZCI6IlNUUy5OVExnemhURjN3NjhpU0VZOEJuTTRSVWVlIiwiQWNjZXNzS2V5U2VjcmV0IjoiOTNqNzRoTHFvVURaYXJNblN0UXZKWUt1VGVUS0U2RVNKaVJzR3JpNEh4OFMiLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE1MDgyNTM0NDM1ODA4NTF9",
        components: [
          {
            name: "BulletScreenComponent",
            type: AliPlayerComponent.BulletScreenComponent,
            args: [
              "欢迎使用阿里播放器",
              { fontSize: "16px", color: "#00c1de" },
              "random",
            ],
          },
          {
            name: "AliPlayerDanmuComponent",
            type: AliPlayerComponent.AliPlayerDanmuComponent,
            args: [danmulist],
          },
        ],
      },
      function(player) {
        console.log("播放器创建好了。");
      }
    );
  </script>
</html>
